<template>
  <el-row :gutter="20" class="head">
    <el-col :span="15">
      <el-menu
        class="el-menu-vertical-demo"
        :collapse="props.flags"
        mode="horizontal"
      >
        <el-menu-item>
          <amazon-circle-filled class="icon" />
          <h1>MOVIE</h1>
        </el-menu-item>
        <div v-for="(item, index) in menu" :key="index">
          <el-menu-item
            v-if="item.Subclass.length == 0"
            :index="item.id"
            @click="datas(index)" >
            <el-icon><component :is="item.icon"></component></el-icon>
            <template #title>
              <router-link :to="item.router"><span>{{ item.title }}</span>
              </router-link>
            </template>
          </el-menu-item>
        </div>
      </el-menu>
    </el-col>
    <el-col :span="3">
      <el-input
        class="seach"
        placeholder="输入影片名进行搜索..."
        v-model="seachmovie"
      >
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
    </el-col>
    <el-col :span="1">
      <el-button @click="seach()" class="seach">
        <el-icon><search /></el-icon>
      </el-button>
    </el-col>
    <el-col :span="4">
      <div class="user">
        <el-button @click="userinfo()">
          <el-icon><user /></el-icon>
          <span>个人中心</span>
        </el-button>
      </div>
    </el-col>
  </el-row>

  <el-drawer v-model="drawer" title="个人中心" direction="ltr" size="30%">
    <el-row
      ><div class="avatar"><img :src="userInfolist.avatar || ''" alt="" /></div
    ></el-row>
    <el-row :gutter="20">
      <div><span>基本信息</span></div>
      <el-col>
        <el-form
          label-width="100px"
          :model="userInfolist"
          style="max-width: 460px"
        >
          <el-form-item label="姓名：">
            <el-input disabled v-model="userInfolist.name" />
          </el-form-item>
          <el-form-item label="账号：">
            <el-input v-model="userInfolist.account" disabled />
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="userInfolist.userphone" disabled />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <div class="orderpanel">
        <span>我的订单</span>
        <el-button class="orders"  @click="innerDrawer = true">订单详情</el-button>
      </div>
      <el-table
        :data="pageData.orderlist"
        style="width: 100%"
      >
        <el-table-column prop="oid" label="订单ID" width="80" />
        <el-table-column prop="cname" label="影院" width="60" />
        <el-table-column
          prop="chinese_name"
          label="中文名称"
          width="80"
          show-overflow-tooltip/>
        <el-table-column
          prop="type"
          label="影片类型"
          width="80"
          show-overflow-tooltip/>
        <el-table-column prop="length" label="影片时长" width="80" />
        <el-table-column prop="time" label="时间段" width="180" />
        <el-table-column prop="price" label="价格" width="60" />
        <el-table-column prop="r_name" label="厅号" width="60" />
        <el-table-column prop="seat" label="座位号" width="80" />
        <el-table-column prop="userphone" label="联系方式" width="120" />
        <el-table-column label="订单状态" width="120">
          <template v-slot="scope">
            <span v-if="scope.row.state == 1">创建成功</span>
            <span v-else-if="scope.row.state == 2">审核中</span>
            <span v-else-if="scope.row.state == 3">已失效</span>
            <span v-else>创建失败</span>
          </template>
        </el-table-column>
        <el-table-column
          :formatter="formatterTime"
          prop="create_time"
          label="创建时间"
          width="110"
        />
      </el-table>
    </el-row>
    <el-row :gutter="20">
      <el-col>
        <div class="clearbtn">
          <el-button @click="clearinfo()">
            <el-icon><mouse /></el-icon>
            <span>注销</span>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-drawer
      v-model="innerDrawer"
      title="我的订单"
      direction="ttb"
      :append-to-body="true"
    >
      <el-table
        :data="pageData.orderlist"
        style="width: 100%"
      >
        <el-table-column prop="oid" label="订单ID" width="80" />
        <el-table-column prop="cname" label="影院" width="60" />
        <el-table-column
          prop="chinese_name"
          label="中文名称"
          width="80"
          show-overflow-tooltip/>
        <el-table-column
          prop="type"
          label="影片类型"
          width="80"
          show-overflow-tooltip/>
        <el-table-column prop="length" label="影片时长" width="80" />
        <el-table-column prop="time" label="时间段" width="180" />
        <el-table-column prop="price" label="价格" width="60" />
        <el-table-column prop="r_name" label="厅号" width="60" />
        <el-table-column prop="seat" label="座位号" width="80" />
        <el-table-column prop="userphone" label="联系方式" width="120" />
        <el-table-column label="订单状态" width="120">
          <template v-slot="scope">
             <span v-if="scope.row.state == 1" style="color:green">创建成功</span>
              <span v-else-if="scope.row.state == 2" style="color:rgb(243, 178, 93)">等待审核</span>
              <span v-else-if="scope.row.state == 3" style="color: rgb(151, 146, 146);">已退票</span>
              <span v-else-if="scope.row.state == 4" style="color:rgb(243, 178, 93);">退票审核中...</span>
               <span v-else-if="scope.row.state == 5" style="color:rgb(121, 124, 126);">已失效</span>
              <span v-else>创建失败</span>
          </template>
        </el-table-column>
        <el-table-column
          :formatter="formatterTime"
          prop="create_time"
          label="创建时间"
          width="110"
        />
         <el-table-column>
          <template v-slot="scope">
            <span  v-if="scope.row.state != 4"><el-button type="primary" @click="refund(scope.row)">退票</el-button></span>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </el-drawer>

<el-row>
          <el-col :span="12">

          </el-col>

  </el-row>

</template>

<script lang="ts">
import { computed, onMounted, reactive, ref, shallowRef } from "vue";
import { AmazonCircleFilled } from "@ant-design/icons-vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Fold,
  HomeFilled,
  User,
  Search,
  Mouse,
} from "@element-plus/icons-vue";
import router from "../../router/router";
import { useRouter } from "vue-router";
import { FormInstance, ElMessage, useRestoreActive } from "element-plus";
import { useStore } from "vuex";
import { getOrderSearchAPI } from "../../api/userinfo";
import { getCurrentInstance } from "vue";

export default {
  components: {
    AmazonCircleFilled,
    Location,
    Document,
    Setting,
    IconMenu,
    Fold,
    User,
    Search,
    Mouse,
  },
  props: {
    flags: Boolean,
  },
  // 通过emits定义事件
  emits: ["click-data"],
  setup(props, { emit }) {
    const instance = getCurrentInstance();
    const drawer = ref(false);
    const seachmovie = ref("");
    const routers = useRouter();
    const store = useStore();
    const userInfolist = reactive({
      uid: store.state.user.userInfo.uid,
      account: store.state.user.userInfo.account,
      name: store.state.user.userInfo.name,
      userphone: store.state.user.userInfo.userphone,
      avatar: store.state.user.userInfo.avatar,
    });
    const data = [
      {
        id: "1",
        icon: HomeFilled,
        title: "首页",
        router: "/index",
        Subclass: [], //是否有二级三级菜单
      },
      {
        id: "2",
        icon: Document,
        title: "影片",
        router: "/movie",
        Subclass: [], //是否有二级三级菜单
      },
    ];
    const datas = (i: any) => {
      // emit('click-data',data[i])
      router.push(data[i].router);
    };
    const formatterTime = (row: any, column: any) => {
      let date = new Date(row[column.property]);
      let year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    };
    const menu = shallowRef(data);
    const userinfo = () => {
      if (sessionStorage.getItem("token") != null || "") {
        drawer.value = true;
        store.dispatch("SET_ORDERINFO", userInfolist.uid).then(() => {
          pageData.orderlist = store.state.order.orderInfo;
          pageData.total=pageData.orderlist.length;
          console.log(pageData.orderlist);
        });
      } else {
        routers.push({ name: "login" });
      }
    };
    const clearinfo = () => {
      sessionStorage.clear();
      drawer.value = false;
      ElMessage.success("您已退出登录！");
    };
    /**分页 */
    const pageData = reactive({
      orderlist: ref([]),
      total: 0, //总数据
    });
    const seach = () => {
      if (seachmovie.value.trim() == "" || seachmovie.value.trim() == null)
        return;
      const str = seachmovie.value;
      routers.push({ path: "/movie" });
      instance?.proxy?.$Bus.emit("on-EmitA", { msg: str });
    };
    const innerDrawer = ref(false);
    const refund=(value:any)=>{
      console.log(value.time);
      
      let dateBegin=new Date(value.time);
      let dateEnd=new Date();
      let dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
      let leave1=dateDiff%(24*3600*1000)    //计算天数后剩余的毫秒数
      let hours=dayDiff*24+Math.floor(leave1/(3600*1000))//计算出小时数
      if(hours > 0 && hours <= 48){
         store.dispatch("SET_ORDERSTATE",{oid:value.oid,state:4,}).then(()=>{
          ElMessage.warning("退票申请已提交，等待审核");
         });
      }
      else{
        ElMessage.warning("当前时间已超过退票时间！！！！");
      } 
     
      
    }
    return {
      props,
      menu,
      datas,
      drawer,
      userinfo,
      userInfolist,
      clearinfo,
      formatterTime,
      pageData,
      seachmovie,
      seach,
      innerDrawer,
      refund,
    };
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: #000;
}
.el-menu--horizontal {
  border-bottom: 1px solid #d8d8d8;
  justify-content: center;
  margin-left: 100px;
}
h1 {
  margin: 0;
}
.icon {
  font-size: 60px;
  justify-content: none;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border: 0;
  padding: 0;
  justify-content: left;
}
.seach {
  margin: 12px 0 0 40px;
}
.user {
  margin-left: 30px;
  padding: 12px 0 12px 40px;
  height: 30px;
  line-height: 30px;
  align-items: flex-start;
  margin-bottom: 0px;
}
.user:hover {
  color: #409eff;
}
.clearbtn::before {
  content: "";
  display: inline-block;
  height: 30px;
  width: 372px;
}
.avatar {
  display: flex;
  height: 100px;
  width: 100px;
  margin: 0;
}
.avatar img {
  border-radius: 50%;
  border: 1px solid rgb(181, 227, 241);
}
.orderpanel{
  display: flex;
  align-items: flex-end;
  margin-top: 20px;
}
.orders{
  position:absolute;
  right:0;
}
</style>
